<template>
  <div class="home">
    <Banner :bannerData="bannerData" :duration="2000"></Banner>
    <Channels @currentChange="handleChange"></Channels>
    <Loading v-show="isLoading"></Loading>
    <News :news="news" v-show="!isLoading"></News>
  </div>
</template>

<script>
import Banner from "@/components/Banner.vue";
import Channels from "@/components/news/Channels.vue";
import News from "@/components/news/News.vue";
import Loading from "@/components/Loading.vue";

import { getNews } from "@/services/services.js";

export default {
  components: {
    Banner,
    Channels,
    News,
    Loading
  },
  data() {
    return {
      bannerData: [
        { src: require("@/assets/banner/banner1.jpg"), bannerId: 1 },
        { src: require("@/assets/banner/banner2.jpg"), bannerId: 2 },
        { src: require("@/assets/banner/banner3.jpg"), bannerId: 3 }
      ],
      nowChannelId:null,
      news: [],
      isLoading:true
    };
  },
  methods: {
    async handleChange(channelId) {
      this.isLoading = true;
      let newsList = await getNews(channelId, 10);
      this.news = newsList.contentlist;
      this.isLoading = false;
    }
  },
};
</script>

<style>
</style>
